<template>
	<view class="user-coupon-detail" :style="{background:pageColor}" v-if="detail.id">
		<view class="pl-md pr-md">
			<view class="space-lg"></view>
			<view class="flex-center flex-column" style="padding: 10rpx 40rpx 40rpx 40rpx"
				v-if="detail.use_scene && detail.status==1">
				<image class="qr-code" :src="detail.qr_code"></image>
				<view class="f-caption c-paragraph mt-md">请出示二维码核销卡券</view>
			</view>
			<view class="fill-base pd-lg mb-lg f-paragraph" style="color:#2A2A2A;border-radius:18rpx"
				v-if="detail.status==2 && detail.use_scene">
				<view class="flex-warp">
					<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
							class="iconfont iconhexiaomendian mr-sm"></i>核销门店:
					</view>
					<view class="flex-1 flex-warp text-bold" style="color:#242424;line-height:40rpx">
						{{detail.hx_store_name || '-'}}
					</view>
				</view>
				<view class="flex-warp mt-md">
					<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
							class="iconfont iconhexiaoren mr-sm"></i>核销人:</view>
					<view class="flex-1 text-bold" style="color:#242424;line-height:40rpx">
						{{detail.hx_user_name || '-'}}
					</view>
				</view>
				<view class="flex-warp mt-md">
					<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
							class="iconfont iconriqi mr-sm"></i>核销时间:</view>
					<view class="flex-1 text-bold" style="color:#242424;line-height:40rpx">{{detail.use_time || '-'}}
					</view>
				</view>
			</view>
			<view class="list-item rel fill-base">
				<view class="bg abs" :style="{background:primaryColor}"></view>
				<view class="flex-center rel" style="z-index: 2;">
					<view class="item-price flex-center flex-column c-base rel"
						:style="{background:`linear-gradient( 180deg, ${color} 0%, ${primaryColor} 100%)`}">
						<view class="dot-item abs fill-base radius left"></view>
						<view class="dot-item abs fill-base radius right"></view>
						<view class="flex-y-baseline f-sm-title text-bold">¥<view style="font-size:48rpx">
								{{detail.discount}}
							</view>
						</view>
						<view class="mt-sm f-icontext">{{detail.type==0?`满${detail.full}元可用`:'无门槛'}}</view>
					</view>
					<view class="flex-1 ml-lg" style="color:#1F1F1F">
						<view class="f-mini-title c-title text-bold max-450 ellipsis" style="margin: 5rpx 0;">
							{{detail.title}}
						</view>
						<view class="mt-md flex-y-center f-icontext">
							<view>共{{detail.num}}张</view>
							<view class="max-350 ellipsis ml-md" v-if="options.gift_record_id">
								获赠人：{{detail.gift_user_name || '-'}}</view>
						</view>
						<view class="flex-y-center f-icontext mt-sm">有效期至<view style="margin-left: 14rpx;">
								{{detail.end_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pd-lg mt-lg f-title text-bold" style="color:#1E1E1E">使用规则</view>

			<view class="fill-base pd-lg f-paragraph" style="border-radius: 18rpx;color:#2A2A2A">
				<view class="text-bold" style="color:#242424">使用规则</view>
				<view class="mt-md pb-md b-1px-b">
					<text decode="emsp" style="word-break:break-all;">{{detail.rule}}</text>
				</view>
				<view class="mt-md text-bold" style="color:#242424">优惠详情</view>
				<view class="mt-md pb-md b-1px-b">
					<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
				</view>
				<view class="mt-md text-bold" style="color:#242424">限用{{detail.use_scene?'门店':'服务'}}</view>
				<view class="mt-md">
					<view v-if="!detail.use_scene&&(detail.send_type==3 || detail.service.length==0)">
						{{detail.send_type==3?'所有服务':'-'}}
					</view>
					<span v-for="(item,index) in (detail.use_scene ? detail.store: detail.service)"
						:key="index">{{index==0?'':'、'}}{{item.title}}</span>
				</view>
				<view class="mt-md c-warning">{{detail.admin_id?'仅限部分城市可使用':'通用券'}}</view>
			</view>
		</view>

		<view :class="[{'space-max-footer':detail.status==1},{'space-footer':detail.status!=1}]"></view>
		<fix-bottom-button @confirm="toShare" :text="[{text:'转赠好友',type:'confirm'}]" bgColor="#fff"
			:classType="classType" tips="卡券持有人发起“转赠”后，获赠人需在24小时内确认接受，否则将视为转赠失败"
			v-if="detail.can_gift && detail.status==1">
		</fix-bottom-button>

		<uni-popup ref="share_coupon_item" type="center" :custom="true">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">转赠好友</view>
				<view class="desc">卡券持有人发起“转赠”后，获赠人需在24小时内确认接受，否则将视为转赠失败</view>
				<input v-model="shareForm.share_num" type="number"
					class="input pl-lg pr-lg text-center f-desc c-title mt-lg radius-20" placeholder="请输入转赠张数"
					placeholder-class="f-desc c-caption" />
				<view class="button">
					<view @tap.stop="$refs.share_coupon_item.close()" class="item-child">取消</view>
					<!-- #ifdef MP-WEIXIN -->
					<button @tap.stop="()=>{}" open-type="share" :data-id="shareForm.id" :data-num="shareForm.num"
						:data-share-num="shareForm.share_num" :data-index="shareForm.index" :data-popup="1"
						class="clear-btn item-child c-base" :style="{background: primaryColor,color:'#fff'}">确定</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view @tap.stop="toConfirmShare" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">确定</view>
					<!-- #endif -->
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="show_oper_item" type="top" :maskClick="false" background="rgba(0,0,0,0.6)">
			<view class="pupup-oper-item">
				<view @tap.stop="$refs.show_oper_item.close()"
					class="close-btn fill-base flex-center mt-lg ml-lg f-paragraph c-title abs radius">
					跳过引导</view>
				<view class="flex-between" style="padding:0 92rpx;">
					<view></view>
					<image class="jiantou-img" :src="`https://api.huixuananmm.com/admin/anmo/alipay/jiantou.png`"></image>
				</view>
				<view class="oper-rule f-mini-title c-title rel">
					<image class="bg-img abs" :src="`https://api.huixuananmm.com/admin/anmo/alipay/bg.png`"></image>
					<image class="bg-icon abs" :src="`https://api.huixuananmm.com/admin/anmo/alipay/bg-icon.png`"></image>
					<view class="rel" style="z-index: 2;">
						<view class="flex-y-center" style="margin: 30rpx 0;">
							<view class="num flex-center mr-md f-sm-title c-base radius">1</view>
							点击右上角“<view class="dot"></view>
							<view class="dot md"></view>
							<view class="dot"></view>”按钮
						</view>
						<view class="flex-y-center">
							<view class="num flex-center mr-md f-sm-title c-base radius">2</view>
							选择“<i class="iconfont iconfenxianggeipengyou"
								style="color:#44A860;font-size: 46rpx;margin-right: 5rpx;"></i>
							转发给朋友”
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '',
				classType: 1,
				detail: {},
				loading: true,
				lockTap: false,
				shareForm: {
					id: 0,
					num: '',
					share_num: ''
				}
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			let {
				giftid = 0
			} = options
			options.gift_record_id = giftid * 1
			this.options = options
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
			this.initIndex()
		},
		async onShareAppMessage(e) {
			console.log(e, "====e")
			let {
				id: pid = 0
			} = this.userInfo
			let {
				id
			} = this.detail
			let {
				num = 1,
					shareNum = 1,
					popup = 0
			} = e.target.dataset
			let reg = /^[1-9]\d*$/
			if (!reg.test(shareNum) || shareNum * 1 > num * 1) {
				shareNum = !reg.test(shareNum) ? 1 : num
			}
			id = await this.$api.mine.couponGiftSend({
				coupon_id: id,
				num: shareNum
			})
			let path = `/user/pages/coupon/get-info?pid=${pid}&id=${id}`
			this.$util.log(path)
			if (num == shareNum) {
				this.detail = Object.assign({}, this.detail, {
					status: -2,
					can_gift: 0,
					gift_user_name: ''
				})
				this.$util.back()
			} else {
				this.detail.num = num - shareNum
			}
			if (popup) {
				this.$refs.share_coupon_item.close()
			}
			return {
				title: '我免费赠送了一张消费券给你，24小时后失效，赶紧领取吧！',
				imageUrl: 'https://api.huixuananmm.com/admin/anmo/coupon/share.png',
				path,
			}
		},
		methods: {
			...mapMutations(['']),
			async initIndex(refresh = false) {
				this.$util.showLoading()
				this.color = this.$util.rgbColor(this.primaryColor)
				let {
					id,
					gift_record_id
				} = this.options
				let data = await this.$api.mine.userCouponInfo({
					id,
					gift_record_id
				})
				if (data.use_scene && data.status == 1) {
					let qr_code = await this.$api.mine.couponHxQr({
						id
					})
					data.qr_code = qr_code
				}
				// #ifdef MP-WEIXIN
				if (data.num == 1) {
					this.classType = 3
				}
				// #endif 
				this.detail = data
				this.$util.hideAll()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor,
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			toShare() {
				let {
					id,
					num
				} = this.detail
				this.shareForm = {
					id,
					num,
					share_num: num
				}
				if (num > 1) {
					this.$refs.share_coupon_item.open()
					return
				}
				this.toConfirmShare()
			},
			async toConfirmShare() {
				let {
					id,
					num,
					share_num
				} = this.shareForm
				let reg = /^[1-9]\d*$/
				if (!reg.test(share_num) || (share_num * 1 && share_num * 1 > num * 1)) {
					this.$util.showToast({
						title: !reg.test(share_num) ? `请输入正确的转赠张数` : `转赠张数不能大于${num}`
					})
					return
				}
				this.$util.showLoading()
				let data = await this.$api.mine.couponGiftSend({
					coupon_id: id,
					num: share_num
				})
				if (num == share_num) {
					this.detail = Object.assign({}, this.detail, {
						status: -2,
						can_gift: 0,
						gift_user_name: ''
					})
					this.$util.back()
				} else {
					this.detail.num = num - share_num
				}
				this.$util.hideAll()
				this.shareForm.id = data
				this.$refs.share_coupon_item.close()
				// #ifdef H5
				this.$jweixin.initJssdk(() => {
					this.toAppShare()
				})
				// #endif
				// #ifdef APP-PLUS
				this.toAppShare()
				// #endif
			},
			toAppShare() {
				let {
					id: pid = 0
				} = this.userInfo
				let {
					id
				} = this.shareForm
				let title = '我免费赠送了一张消费券给你'
				let summary = '24小时后失效，赶紧领取吧'
				let imageUrl = 'https://api.huixuananmm.com/admin/anmo/coupon/share-app.png'

				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/${this.portName}/#/user/pages/coupon/get-info?id=${id}&pid=${pid}`

				// #ifdef H5
				this.$jweixin.showOptionMenu()
				this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
				this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				this.$refs.show_oper_item.open()
				// #endif
				// #ifdef APP-PLUS
				let item = {
					href,
					title,
					summary,
					imageUrl,
				}
				if (this.configInfo.isIos) {
					this.$util.showLoading()
					this.toTransImg(item)
				} else {
					this.sharePage(item)
				}
				// #endif
			},
			toTransImg(item) {
				let that = this
				let cur_unix = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
				uni.downloadFile({
					url: item.imageUrl,
					success: (e) => {
						// 将png转换成jpg格式 只有jpg格式支持压缩api
						plus.zip.compressImage({
								src: e.tempFilePath,
								dst: `_doc/${cur_unix}.jpg`,
								format: "jpg"
							},
							response => {
								// 压缩图片
								plus.zip.compressImage({
									src: response.target,
									dst: `_doc/${cur_unix}-img.jpg`,
									quality: 50,
								}, res => {
									item.imageUrl = res.target || `/static/img/logo.png`
									that.sharePage(item)
								}, error => {
									item.imageUrl = `/static/img/logo.png`
									that.sharePage(item)
								})
							})
					}
				})
			},
			sharePage(item) {
				this.$util.hideAll()
				let {
					href,
					title,
					summary,
					imageUrl,
				} = item
				uni.share({
					provider: "weixin",
					scene: 'WXSceneSession',
					type: 0,
					href,
					title,
					summary,
					imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
		}
	}
</script>


<style lang="scss">
	.user-coupon-detail {

		.qr-code {
			width: 320rpx;
			height: 320rpx;
			/* #ifdef H5 */
			border-radius: 16rpx;
			/* #endif */
		}

		.list-item {
			height: 190rpx;
			border-radius: 18rpx;

			.bg {
				opacity: 0.1;
				border-radius: 18rpx;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
			}


			.item-price {
				width: 200rpx;
				height: 190rpx;
				border-radius: 18rpx;
				overflow: hidden;

				.dot-item {
					width: 24rpx;
					height: 24rpx;
					top: 83rpx;
				}

				.dot-item.left {
					left: -12rpx;
				}

				.dot-item.right {
					right: -12rpx;
				}
			}

		}

		.b-1px-b::after {
			color: #EAEAEA
		}

		.space-max-footer {
			height: 220rpx;
			height: calc(220rpx + env(safe-area-inset-bottom) / 2);
			padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		}

		.pupup-oper-item {

			.close-btn {
				top: 30rpx;
				left: 0;
				width: 148rpx;
				height: 56rpx;
			}

			.jiantou-img {
				width: 206rpx;
				height: 268rpx;
			}

			.oper-rule {
				width: 630rpx;
				height: 346rpx;
				padding: 80rpx 60rpx;
				margin: 0 auto;

				.bg-img {
					left: 0;
					top: 0;
					width: 630rpx;
					height: 346rpx;
				}

				.bg-icon {
					top: -56rpx;
					right: -24rpx;
					width: 174rpx;
					height: 166rpx;
				}

				.num {
					width: 45rpx;
					height: 45rpx;
					background: #000000;
				}

				.dot {
					width: 8rpx;
					height: 8rpx;
					background: #000000;
					border-radius: 50%;
					margin: 0 3rpx;
				}

				.dot.md {
					width: 12rpx;
					height: 12rpx;
				}

				.map-img {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}
</style>